<template>
  <!-- 餐饮管理--------------------------------------  p2------------------------------------------------ -->
  <div>
    <div class="container-homework">
      <!-- 固定图标 -->
      <div
        class="add_icon"
        @click="$router.push({ path: '/input_menu', query: { type: 0 } })"
      >
        <img src="../../../static/img/icon_hdglfbhd@2x.png" />
      </div>
      <!-- 标题 -->
      <div class="food_title">
        <img src="../../assets/imgs/icon_tao.png" alt="" srcset="" />
        <p>套餐管理</p>
      </div>

      <el-divider></el-divider>
      <!-- 列表盒子 -->
      <div class="food_list">
        <!-- 标题 -->
        <div class="foodList_title">
          <span>当前结果：</span><span>总计 {{ total }} 条记录 </span>
        </div>
        <!-- 列表 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="loading">
          <el-table-column
            prop="setMealName"
            label="套餐名"
            min-width="25%">
          </el-table-column>
          <el-table-column
            prop="gradeNames"
            label="适用年级"
            min-width="25%">
          </el-table-column>
          <el-table-column
            prop="healthIndicator"
            label="适用人群"
            min-width="25%">
          </el-table-column>
          <el-table-column prop="operation" label="操作" min-width="10%">
            <template slot-scope="scope">
              <el-select
                v-model="operVal"
                @change="changeVal(scope.row.setMealId)"
                placeholder="操作"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { food_text, delete_setmeal } from '@/api/index'
export default {
  name: 'homework-sup',
  data() {
    return {
      // 总条数
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 0,
      offset: 0,
      // 数据加载时
      loading: true,
      tableData: [],
      operVal: '',
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '详情'
      }],
    }
  },
  created() {
    this.get_foodlist()
  },
  methods: {
    changeVal(id) {
      if (this.operVal === '2') {
        //修改
        this.$router.push({ path: `/input_menu`, query: { id: id, type: 1 } })
        this.operVal = ''
      } else {
        // 删除
        this.$confirm('此操作将删除该套餐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delete_foodlist(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.operVal = ''
      }
    },

    // 删除套餐列表数据
    async delete_foodlist(id) {
      const res = await delete_setmeal(id)
      console.log('删除列表信息', res);
      if (res.data.errorCode == 0) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.get_foodlist();
      }


    },

    // 教师-首页课程列表
    async get_foodlist() {
      var data = {
        "offset": this.offset, //当页起始下标 类似页码
        "pageSize": this.pageSize
      };
      const res = await food_text(data)
      console.log('套餐列表', res);
      if (res.status === 200) {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.loading = false
      }
    },
    // 分页函数
    changePage (newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.offset = this.pageSize * (newPage - 1);
      this.get_foodlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.food_text:first-child {
  padding-left: 0;
}
.food_text:last-child {
  padding-right: 0;
}
.food_text {
  padding: 0 0.18rem;
  > div:first-child {
    display: flex;
    align-items: center;
    > img {
      width: 0.1563rem;
      height: 0.1563rem;
      margin-right: 0.0521rem;
    }
    > p {
      color: #343434;
      font-size: 0.0833rem;
    }
  }
  > div:nth-of-type(2) {
    padding: 0.0677rem 0.0781rem;
    border-radius: 0.0781rem;
    font-size: 0.0625rem;
    color: #888888;
    line-height: 1.6;
    letter-spacing: 0.0026rem;
    min-height: 0.9375rem;
    line-height: 1.8;
  }
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
}
.food_title {
  display: flex;
  align-items: center;
  img {
    width: 0.125rem;
    margin-right: 0.026rem;
  }
  p {
    font-size: 0.0938rem;
    color: #525252;
    font-weight: 500;
  }
}
.food_list {
  .foodList_title {
    margin-left: 0.1042rem;
    display: flex;
    align-items: center;
    > span:first-child {
      color: #525252;
      font-size: 0.0729rem;
      margin-right: 0.026rem;
    }
    > span:nth-of-type(2) {
      font-size: 0.0729rem;
      color: #888888;
    }
  }
  .el-table {
    margin-top: 0.1198rem;
    /deep/.el-input--medium .el-input__inner,
    .el-input--suffix .el-input__inner,
    .el-select .el-input__inner {
      width: 0.4479rem;
      height: 0.1875rem;
      background: #f8f8f8;
      border-radius: 0.0938rem;
      padding: 0 0.1042rem 0 0.1302rem;
      color: #888888;
    }
    /deep/.el-input__suffix {
      display: none;
    }
  }
}

</style>
